<template>
    <li
      @mouseenter="handleMouse(true)" 
      @mouseleave="handleMouse(false)" 
      :style="{backgroundColor:mouseType?'#ddd':'white'}"
      >
        <label>
        <input type="checkbox" :checked="todo.done"
        @change="handleCheckbox(todo.id,$event)"/>
        <span>{{todo.name}}</span>
        </label>
        <button class="btn btn-danger" :style="{display:mouseType?'block':'none'}" 
        @click="handleDelete(todo.id)">删除</button>
    </li>
</template>

<script>
export default{
  props:['todo'],
  data(){
    return {
      mouseType: false
    }
  },
  methods:{
    handleCheckbox(id,e){
      this.$emit("handleCheckBox",id,e.target.checked)
    },
    handleMouse(mouseType){
      // console.log(mouseType)
      this.mouseType = mouseType
    },
    handleDelete(id){
      this.$emit("handleDelete",id)
    }
  }
}
</script>

<style>
</style>
